<script setup>
import { ref } from 'vue'
import MyList from './components/MyList.vue'
import { usePlayListStore } from '@/stores/playListStore.js'

const usePlayList = usePlayListStore()


// true  为创建的歌单，false 为收藏的歌单
const activeTitle = ref(true)
</script>

<template>
  <div class="my-play-list">
    <div class="title">
      <h3 :class="{ 'title-active': activeTitle }" @click="activeTitle = true">创建的歌单</h3>
      <h3 :class="{ 'title-active': !activeTitle }" @click="activeTitle = false">收藏的歌单</h3>
    </div>

    <MyList :list="usePlayList.createPlayList" v-show="activeTitle"/>
    <MyList :list="usePlayList.collectPlayList" v-show="!activeTitle"/>
  </div>
</template>

<style scoped lang='scss'>
.my-play-list {
  max-width: 1165px;
  margin: 0 auto;

  .title {
    display: flex;
    align-items: flex-end;

    h3 {
      width: 120px;
      margin-top: 20px;
      font-size: 18px;
      color: #a3a3a3;
      cursor: pointer;

      &:hover {
        font-size: 20px;
        color: #444444;
      }
    }

    .title-active {
      font-size: 20px;
      color: #444444;
    }
  }
}
</style>
